<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<script src="js/mui.min.js"></script>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="css/index.css" />
		<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" charset="utf-8">
			mui.init();
		</script>
	</head>

	<body>

		<div id="index1">
			<!--页面标题栏开始-->
			<div class="navbar-fixed-top">
				<div class="col-xs-12">
					<button id="btn1" class="mui-btn mui-pull-right">
						<span id="span1" class="mui-icon mui-icon-chatbubble"></span>
					</button>
					<h1 class="mui-title"><strong>记录运动时刻</strong></h1>
				</div>
				<div class="col-xs-12" style="text-align: center;margin-top: 10px;">
					<div class="col-xs-6 div1">
						<img src="img/recorder.png" />拍视频记录
					</div>
					<div class="col-xs-6 div1">
						请教或指点
						<img src="img/faq.png" />
					</div>
				</div>
			</div>
			<div id="slider" class="mui-slider">
				<div id="sliderSegmentedControl" class=" mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<a class="mui-control-item" href="#item1mobile">
						<div id="" class="mui-media-body">
							11
							<p class='mui-ellipsis'>记录</p>
						</div>
					</a>
					<a class="mui-control-item" href="#item2mobile">
						<div id="" class="mui-media-body">
							6
							<p class='mui-ellipsis'>合辑</p>
						</div>
					</a>
					<a class="mui-control-item" href="#item3mobile">
						<div id="" class="mui-media-body">
							0
							<p class='mui-ellipsis'>收藏</p>
						</div>
					</a>
					<a class="mui-control-item" href="#item4mobile">
						<div id="" class="mui-media-body">
							3
							<p class='mui-ellipsis'>草稿</p>
						</div>
					</a>
				</div>
				<div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-3"></div>
				<div class="mui-slider-group">
					<div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
						<div class="col-xs-12">
							06月01日
						</div>
						<div class="">
							<div class="col-xs-3" style="padding: 1px;">
								<img src="img/five.jpg" />
							</div>
							<div class="col-xs-3" style="padding: 1px;">
								<img src="img/four.jpg" />
							</div>
							<div class="col-xs-3" style="padding: 1px;">
								<img src="img/one.jpg" />
							</div>
							<div class="col-xs-3" style="padding: 1px;">
								<img src="img/three.jpg" />
							</div>
						</div>
						<div class="col-xs-12">
							06月05日
						</div>
						<div class="">
							<div class="col-xs-3" style="padding: 1px;">
								<img src="img/three.jpg" />
							</div>
							<div class="col-xs-3" style="padding: 1px;">
								<img src="img/one.jpg" />

							</div>
							<div class="col-xs-3" style="padding: 1px;">
								<img src="img/four.jpg" />
							</div>
							<div class="col-xs-3" style="padding: 1px;">
								<img src="img/five.jpg" />
							</div>
						</div>
						<div class="col-xs-12">
							06月11日
						</div>
						<div class="">
							<div class="col-xs-3" style="padding: 1px;">
								<img src="img/one.jpg" />
							</div>
							<div class="col-xs-3" style="padding: 1px;">
								<img src="img/three.jpg" />
							</div>
							<div class="col-xs-3" style="padding: 1px;">
								<img src="img/five.jpg" />

							</div>
							<div class="col-xs-3" style="padding: 1px;">

								<img src="img/four.jpg" />
							</div>
						</div>
						<div class="col-xs-12">
							06月18日
						</div>
						<div class="">
							<div class="col-xs-3" style="padding: 1px;">
								<img src="img/five.jpg" />
							</div>
							<div class="col-xs-3" style="padding: 1px;">
								<img src="img/four.jpg" />
							</div>
							<div class="col-xs-3" style="padding: 1px;">
								<img src="img/one.jpg" />
							</div>
							<div class="col-xs-3" style="padding: 1px;">
								<img src="img/three.jpg" />
							</div>
						</div>
						<div class="col-xs-12">
							06月20日
						</div>
						<div class="">
							<div class="col-xs-3" style="padding: 1px;">
								<img src="img/four.jpg" />
							</div>
							<div class="col-xs-3" style="padding: 1px;">

								<img src="img/five.jpg" />
							</div>
							<div class="col-xs-3" style="padding: 1px;">
								<img src="img/three.jpg" />
							</div>
							<div class="col-xs-3" style="padding: 1px;">
								<img src="img/one.jpg" />
							</div>
						</div>
						<div class="col-xs-12" style="height: 50px;">

						</div>
					</div>
					<div id="item2mobile" class="mui-slider-item mui-control-content">
						<div class="col-xs-12">
							06月02日
						</div>
						<div class="">
							<div class="col-xs-3" style="padding: 1px;">
								<img src="img/four.jpg" />
							</div>
							<div class="col-xs-3" style="padding: 1px;">

								<img src="img/five.jpg" />
							</div>
							<div class="col-xs-3" style="padding: 1px;">
								<img src="img/three.jpg" />
							</div>
							<div class="col-xs-3" style="padding: 1px;">
								<img src="img/one.jpg" />
							</div>
						</div>
						<div class="col-xs-12">
							06月04日
						</div>
						<div class="">
							<div class="col-xs-3" style="padding: 1px;">
								<img src="img/five.jpg" />
							</div>
							<div class="col-xs-3" style="padding: 1px;">
								<img src="img/four.jpg" />
							</div>
							<div class="col-xs-3" style="padding: 1px;">
								<img src="img/one.jpg" />
							</div>
							<div class="col-xs-3" style="padding: 1px;">
								<img src="img/three.jpg" />
							</div>
						</div>
						<div class="col-xs-12">
							06月05日
						</div>
						<div class="">
							<div class="col-xs-3" style="padding: 1px;">
								<img src="img/three.jpg" />
							</div>
							<div class="col-xs-3" style="padding: 1px;">
								<img src="img/one.jpg" />

							</div>
							<div class="col-xs-3" style="padding: 1px;">
								<img src="img/four.jpg" />
							</div>
							<div class="col-xs-3" style="padding: 1px;">
								<img src="img/five.jpg" />
							</div>
						</div>
						<div class="col-xs-12" style="height: 50px;">

						</div>
					</div>
					<div id="item3mobile" class="mui-slider-item mui-control-content">
						<div class="col-xs-12">
							06月04日
						</div>
						<div class="">
							<div class="col-xs-3" style="padding: 1px;">
								<img src="img/five.jpg" />
							</div>
							<div class="col-xs-3" style="padding: 1px;">
								<img src="img/four.jpg" />
							</div>
							<div class="col-xs-3" style="padding: 1px;">
								<img src="img/one.jpg" />
							</div>
							<div class="col-xs-3" style="padding: 1px;">
								<img src="img/three.jpg" />
							</div>
						</div>
						<div class="col-xs-12">
							06月11日
						</div>
						<div class="">
							<div class="col-xs-3" style="padding: 1px;">
								<img src="img/one.jpg" />
							</div>
							<div class="col-xs-3" style="padding: 1px;">
								<img src="img/three.jpg" />
							</div>
							<div class="col-xs-3" style="padding: 1px;">
								<img src="img/five.jpg" />
							</div>
							<div class="col-xs-3" style="padding: 1px;">
								<img src="img/four.jpg" />
							</div>
						</div>
					</div>
					<div id="item4mobile" class="mui-slider-item mui-control-content">
							<div class="col-xs-12">
							07月18日
						</div>
						<div class="">
							<div class="col-xs-3" style="padding: 1px;">
								<img src="img/five.jpg" />
							</div>
							<div class="col-xs-3" style="padding: 1px;">
								<img src="img/four.jpg" />
							</div>
							<div class="col-xs-3" style="padding: 1px;">
								<img src="img/one.jpg" />
							</div>
							<div class="col-xs-3" style="padding: 1px;">
								<img src="img/three.jpg" />
							</div>
						</div>
						<div class="col-xs-12">
							07月20日
						</div>
						<div class="">
							<div class="col-xs-3" style="padding: 1px;">
								<img src="img/five.jpg" />
							</div>
							<div class="col-xs-3" style="padding: 1px;">
								<img src="img/three.jpg" />
							</div>
							<div class="col-xs-3" style="padding: 1px;">
								<img src="img/one.jpg" />
							</div>
							<div class="col-xs-3" style="padding: 1px;">
								<img src="img/four.jpg" />
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!--
        	作者：z@163.com
        	时间：2015-06-27
        	描述：广场
        -->
		<div id="index2plaza">
			<div class="navbar-fixed-top">
				<div id="menu" class="">
					<div id="new" class="col-xs-6">
						最新
					</div>
					<div id="lei" class="col-xs-6">
						列表
					</div>
				</div>
			</div>
			<div class="div2">
				<div id="newone" class="">
					<div class="" style="height: 100px;">
						<div class="col-xs-6" style=" padding: 1px;">
							<a href="#">
								<img src="img/five.jpg" width="100%" />
								<div class="col-xs-12 " style="color: white; margin-top: -35px;">
									<div class="imgname">
										<img src="img/four.jpg" class="img1" />
									</div>
									<div class="name">
										<strong>我的我我</strong>
									</div>
								</div>
							</a>
						</div>
						<div class="col-xs-6" style=" padding: 1px;">
							<a href="#">
								<img src="img/five.jpg" width="100%" style="" />
								<div class="col-xs-12" style="color: white; margin-top: -35px;">
									<div class="imgname">
										<img src="img/four.jpg" class="img1" />
									</div>
									<div class="name">
										<strong>我的我我我我我我我我我我我我我我我我我我我</strong>
									</div>
								</div>
							</a>
						</div>
					</div>
					<div class="" style="height: 100px;">
						<div class="col-xs-6" style=" padding: 1px;">
							<a href="#">
								<img src="img/five.jpg" width="100%" style="" />
								<div class="col-xs-12" style="color: white; margin-top: -35px;">
									<div class="imgname">
										<img src="img/four.jpg" class="img1" />
									</div>
									<div class="name">
										<strong>我的我我我我我我我我我我我我我我我我我我我</strong>
									</div>
								</div>
							</a>
						</div>
						<div class="col-xs-6" style=" padding: 1px;">
							<a href="#">
								<img src="img/five.jpg" width="100%" style="" />
								<div class="col-xs-12" style="color: white; margin-top: -35px;">
									<div class="imgname">
										<img src="img/four.jpg" class="img1" />
									</div>
									<div class="name">
										<strong>我的我我我我我我我我我我我我我我我我我我我</strong>
									</div>
								</div>
							</a>
						</div>
					</div>
					<div class="" style="height: 100px;">
						<div class="col-xs-6" style=" padding: 1px;">
							<a href="#">
								<img src="img/five.jpg" width="100%" style="" />
								<div class="col-xs-12" style="color: white; margin-top: -35px;">
									<div class="imgname">
										<img src="img/four.jpg" class="img1" />
									</div>
									<div class="name">
										<strong>我的我我我我我我我我我我我我我我我我我我我</strong>
									</div>
								</div>
							</a>
						</div>
						<div class="col-xs-6" style=" padding: 1px;">
							<a href="#">
								<img src="img/five.jpg" width="100%" style="" />
								<div class="col-xs-12" style="color: white; margin-top: -35px;">
									<div class="imgname">
										<img src="img/four.jpg" class="img1" />
									</div>
									<div class="name">
										<strong>我的我我我我我我我我我我我我我我我我我我我</strong>
									</div>
								</div>
							</a>
						</div>
					</div>
					<div class="" style="height: 100px;">
						<div class="col-xs-6" style=" padding: 1px;">
							<a href="#">
								<img src="img/five.jpg" width="100%" style="" />
								<div class="col-xs-12" style="color: white; margin-top: -35px;">
									<div class="imgname">
										<img src="img/four.jpg" class="img1" />
									</div>
									<div class="name">
										<strong>我的我我我我我我我我我我我我我我我我我我我</strong>
									</div>
								</div>
							</a>
						</div>
						<div class="col-xs-6" style=" padding: 1px;">
							<a href="#">
								<img src="img/five.jpg" width="100%" style="" />
								<div class="col-xs-12" style="color: white; margin-top: -35px;">
									<div class="imgname">
										<img src="img/four.jpg" class="img1" />
									</div>
									<div class="name">
										<strong>我的我我我我我我我我我我我我我我我我我我我</strong>
									</div>
								</div>
							</a>
						</div>
					</div>
					<!--
                    	作者：z@163.com
                    	时间：2015-06-29
                    	描述：空白
                    -->
					<div class="wudiv">

					</div>
				</div>
				<div id="leione" class="">
					<div class="" style="height: 100px;">
						<div class="col-xs-12" style="padding: 1px;">
							<a href="#">
								<img src="img/five.jpg" width="100%" height="100px" />
								<div id="gaoxiao">
									<strong>搞笑</strong>
								</div>
							</a>
						</div>

					</div>
					<div class="" style="margin-top: 2px;">
						<div class="col-xs-6" style=" padding: 1px;">
							<a href="#">
								<img src="img/five.jpg" width="100%" style="height: 150px;" />
								<div class="col-xs-12 gaoxiao">
									<strong>健身</strong>
								</div>
							</a>
						</div>
						<div class="col-xs-6" style=" padding: 1px;">
							<a href="#">
								<img src="img/five.jpg" width="100%" style="height: 150px;" />
								<div class="col-xs-12 gaoxiao">
									<strong>武术</strong>
								</div>
							</a>
						</div>
					</div>
					<div class="">
						<div class="col-xs-6" style=" padding: 1px;">
							<a href="#">
								<img src="img/five.jpg" width="100%" style="height: 60px;" />
								<div class="col-xs-12 fonttext">
									<strong>女神</strong>
								</div>
							</a>
						</div>
						<div class="col-xs-6" style=" padding: 1px;">
							<a href="#">
								<img src="img/five.jpg" width="100%" style="height: 60px;" />
								<div class="col-xs-12 fonttext">
									<strong>男神</strong>
								</div>
							</a>
						</div>
					</div>
					<div class="">
						<div class="col-xs-6" style=" padding: 1px;">
							<a href="#">
								<img src="img/five.jpg" width="100%" style="height: 60px;" />
								<div class="col-xs-12 fonttext">
									<strong>瑜伽</strong>
								</div>
							</a>
						</div>
						<div class="col-xs-6" style=" padding: 1px;">
							<a href="#">
								<img src="img/five.jpg" width="100%" style="height: 60px;" />
								<div class="col-xs-12 fonttext">
									<strong>舞蹈</strong>
								</div>
							</a>
						</div>
					</div>
					<div class="">
						<div class="col-xs-6" style=" padding: 1px;">
							<a href="#">
								<img src="img/five.jpg" width="100%" style="height: 60px;" />
								<div class="col-xs-12 fonttext">
									<strong>明星</strong>
								</div>
							</a>
						</div>
						<div class="col-xs-6" style=" padding: 1px;">
							<a href="#">
								<img src="img/five.jpg" width="100%" style="height: 60px;" />
								<div class="col-xs-12 fonttext">
									<strong>球类</strong>
								</div>
							</a>
						</div>
					</div>
					<div class="">
						<div class="col-xs-6" style=" padding: 1px;">
							<a href="#">
								<img src="img/five.jpg" width="100%" style="height: 60px;" />
								<div class="col-xs-12 fonttext">
									<strong>教程</strong>
								</div>
							</a>
						</div>
						<div class="col-xs-6" style=" padding: 1px;">
							<a href="#">
								<img src="img/five.jpg" width="100%" style="height: 60px;" />
								<div class="col-xs-12 fonttext">
									<strong>表演</strong>
								</div>
							</a>
						</div>
					</div>
					<div class="">
						<div class="col-xs-6" style=" padding: 1px;">
							<a href="#">
								<img src="img/five.jpg" width="100%" style="height: 60px;" />
								<div class="col-xs-12 fonttext">
									<strong>逗比</strong>
								</div>
							</a>
						</div>
						<div class="col-xs-6" style=" padding: 1px;">
							<a href="#">
								<img src="img/five.jpg" width="100%" style="height: 60px;" />
								<div class="col-xs-12 fonttext">
									<strong>炫耀</strong>
								</div>
							</a>
						</div>
					</div>
					<!--
						作者：z@163.com
						时间：2015-06-29
						描述：空白
					-->
					<div class="col-xs-12 fonttext" style="height: 100px;">
					</div>

				</div>
			</div>
		</div>
		</div>
		</div>
		</div>
		<!--
        	作者：z@163.com
        	时间：2015-06-27
        	描述：个人
        -->
		<div id="index3me">
			<div class="navbar-fixed-top">
				<!--页面主结构结束-->
				<!--单页面开始-->
				<div id="setting" class="mui-page">
					<!--页面标题栏开始-->
					<div class="mui-navbar-inner mui-bar mui-bar-nav">
						<button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left">
						</button>
						<h1 class="mui-center mui-title">我的</h1>
					</div>
					<!--页面标题栏结束-->
					<!--页面主内容区开始-->
					<div class="mui-page-content">
						<div class="mui-scroll">
							<ul class="mui-table-view mui-table-view-chevron" style="margin-top: 50px;">
								<li class="mui-table-view-cell">
									<a href="setting.html" class="mui-navigate-right">
										<div id="">
											<div class="" style="float: left;">
												<img src="img/one.jpg" height="60px" width="60px"/>
											</div>
										<div class="" style="margin-top: 5px; margin-left: 10px; float: left;">
											<p style="font-size: 15px;">李教练</p>
											<div id="" style="background: orangered; font-size: 10px; margin-top: 10px; text-align: center;">
												教练
											</div>
										</div>
									</div>
									<span class="mui-badge" style="background: transparent;"><img src="img/qrcode.png"/></span>
									</a>
								</li>
							</ul>
							<ul class="mui-table-view mui-table-view-chevron" style="margin-top: 25px;">
								<li class="mui-table-view-cell">
									<a href="#" class="mui-navigate-right"><img src="img/group.png"/>&nbsp;&nbsp;&nbsp;通讯录</a>
								</li>
							</ul>
							<ul class="mui-table-view mui-table-view-chevron">
								<li class="mui-table-view-cell">
									<a href="#" class="mui-navigate-right"><img src="img/message.png"/>&nbsp;&nbsp;&nbsp;消息中心</a>
								</li>
							</ul>
							<ul class="mui-table-view mui-table-view-chevron" style="margin-top: 25px;">
								<li class="mui-table-view-cell">
									<a href="#" class="mui-navigate-right"><img src="img/iconfont-saoyisao.png"/>&nbsp;&nbsp;&nbsp;扫一扫</a>
								</li>
							</ul>
							<ul class="mui-table-view mui-table-view-chevron" >
								<li class="mui-table-view-cell">
									<a href="#" class="mui-navigate-right"><img src="img/config.png"/>&nbsp;&nbsp;&nbsp;设置</a>
								</li>
							</ul>
						</div>
					</div>
				</div>
				<!--页面主内容区结束-->
			</div>
		</div>
		</div>
		<div class="nav navbar-fixed-bottom" style="text-align: center; border-top: 1px solid #CCCCCC; line-height: 10px;background: white;">
			<div id="record" class="col-xs-4">
				<img src="img/moments.png" />
				<p>记录</p>
			</div>
			<div id="plaza" class="col-xs-4">
				<img src="img/share.png" />
				<p>广场</p>
			</div>
			<div id="me" class="col-xs-4">
				<img src="img/user.png" />
				<p>我的</p>
			</div>
		</div>
	</body>
</html>